<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>滚动隐藏Header效果</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- 配置Tailwind自定义颜色 -->
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#3B82F6",
              secondary: "#1E40AF",
            },
          },
        },
      };
    </script>

    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .header-transition {
          transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }
      }
    </style>
  </head>
  <body class="bg-gray-100">
    <!-- Header容器 -->
    <header class="w-full bg-white shadow-md">
      <!-- 第一组元素 - 会滚动隐藏 -->
      <div
        id="scroll-hide"
        class="header-transition py-4 px-6 md:px-12 flex justify-between items-center"
      >
        <div class="flex items-center space-x-2">
          <i class="fa fa-shopping-bag text-primary text-2xl"></i>
          <span class="text-xl font-bold text-gray-800">品牌名称</span>
        </div>
        <nav class="hidden md:flex items-center space-x-8">
          <a href="#" class="text-gray-600 hover:text-primary transition-colors"
            >首页</a
          >
          <a href="#" class="text-gray-600 hover:text-primary transition-colors"
            >产品</a
          >
          <a href="#" class="text-gray-600 hover:text-primary transition-colors"
            >关于我们</a
          >
          <a href="#" class="text-gray-600 hover:text-primary transition-colors"
            >联系我们</a
          >
        </nav>
        <div class="flex items-center space-x-4">
          <button class="text-gray-600 hover:text-primary transition-colors">
            <i class="fa fa-search text-lg"></i>
          </button>
          <button
            class="text-gray-600 hover:text-primary transition-colors md:hidden"
          >
            <i class="fa fa-bars text-lg"></i>
          </button>
        </div>
      </div>

      <!-- 第二组元素 - 固定在顶部 -->
      <div
        id="fixed-header"
        class="py-3 px-6 md:px-12 bg-white border-t border-gray-100 flex justify-between items-center"
      >
        <div class="flex items-center space-x-6">
          <a
            href="#"
            class="text-sm font-medium text-gray-700 hover:text-primary transition-colors"
            >新品上市</a
          >
          <a
            href="#"
            class="text-sm font-medium text-gray-700 hover:text-primary transition-colors"
            >热销产品</a
          >
          <a
            href="#"
            class="text-sm font-medium text-gray-700 hover:text-primary transition-colors"
            >限时优惠</a
          >
          <a
            href="#"
            class="text-sm font-medium text-gray-700 hover:text-primary transition-colors"
            >售后服务</a
          >
        </div>
        <div class="flex items-center space-x-4">
          <button class="text-gray-600 hover:text-primary transition-colors">
            <i class="fa fa-user text-lg"></i>
          </button>
          <button
            class="text-gray-600 hover:text-primary transition-colors relative"
          >
            <i class="fa fa-shopping-cart text-lg"></i>
            <span
              class="absolute -top-2 -right-2 bg-primary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center"
              >3</span
            >
          </button>
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="container mx-auto px-4 py-8">
      <!-- 示例内容，用于产生滚动效果 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <img
          src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/59d2f1f448454b6b9fc12bae9b9e95c8.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1757210206&x-signature=Yj6ep87QA6CrS1PBY4PGgcvID1E%3D"
          alt="示例图片1"
          class="w-full h-auto rounded-md mb-6"
        />
        <h1 class="text-2xl font-bold text-gray-800 mb-4">页面标题</h1>
        <p class="text-gray-600 mb-4">
          这是一个示例页面，用于展示滚动时Header的变化效果。请向下滚动页面，观察顶部导航栏的变化。
          当页面向下滚动时，顶部的第一组元素会逐渐隐藏，而第二组元素会固定在页面顶部。
        </p>
      </div>

      <!-- 添加更多内容以产生足够的滚动高度 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow-md p-6">
          <img
            src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/b3577b2f8468416ba5a094bf55427ac3.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1757232166&x-signature=lg5B7Wl6K4w2CLxMmmQJalR%2F80Y%3D"
            alt="示例图片2"
            class="w-full h-auto rounded-md mb-4"
          />
          <h2 class="text-xl font-semibold text-gray-800 mb-2">内容卡片 1</h2>
          <p class="text-gray-600">
            这是一个内容卡片，用于填充页面，使页面能够滚动。
          </p>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6">
          <h2 class="text-xl font-semibold text-gray-800 mb-2">内容卡片 2</h2>
          <p class="text-gray-600 mb-4">
            这是一个内容卡片，用于填充页面，使页面能够滚动。
          </p>
          <p class="text-gray-600 mb-4">
            继续向下滚动，可以看到顶部导航的变化效果。
          </p>
        </div>
      </div>

      <!-- 长文本内容 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">长文本内容</h2>
        <p class="text-gray-600 mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
        <p class="text-gray-600 mb-4">
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est
          laborum.
        </p>
        <p class="text-gray-600 mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
        <p class="text-gray-600 mb-4">
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est
          laborum.
        </p>
      </div>

      <!-- 更多内容 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">更多内容</h2>
        <p class="text-gray-600 mb-4">继续向下滚动...</p>
        <div
          class="h-96 bg-gray-100 rounded-md flex items-center justify-center"
        >
          <p class="text-gray-500">此处为空白区域，用于增加页面高度</p>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-12 px-6">
      <div class="container mx-auto">
        <p class="text-center">© 2023 示例网站 版权所有</p>
      </div>
    </footer>

    <script>
      // 获取DOM元素
      const scrollHideElement = document.getElementById("scroll-hide");
      const fixedHeaderElement = document.getElementById("fixed-header");

      // 记录上一次滚动的位置
      let lastScrollTop = 0;
      // 滚动阈值，超过这个值才开始隐藏
      const scrollThreshold = 50;

      // 监听滚动事件
      window.addEventListener("scroll", () => {
        // 获取当前滚动位置
        const scrollTop =
          window.pageYOffset || document.documentElement.scrollTop;

        // 当滚动超过阈值，并且是向下滚动时
        if (scrollTop > scrollThreshold && scrollTop > lastScrollTop) {
          // 隐藏第一组元素
          scrollHideElement.style.transform = "translateY(-100%)";
          scrollHideElement.style.opacity = "0";

          // 给第二组元素添加固定定位
          fixedHeaderElement.classList.add(
            "fixed",
            "top-0",
            "left-0",
            "right-0",
            "z-50"
          );
          // 添加一个占位元素的高度，防止内容跳动
          document.body.style.paddingTop =
            fixedHeaderElement.offsetHeight + "px";
        } else {
          // 显示第一组元素
          scrollHideElement.style.transform = "translateY(0)";
          scrollHideElement.style.opacity = "1";

          // 移除固定定位
          fixedHeaderElement.classList.remove(
            "fixed",
            "top-0",
            "left-0",
            "right-0",
            "z-50"
          );
          document.body.style.paddingTop = "0";
        }

        // 更新上一次滚动位置
        lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
      });
    </script>
  </body>
</html>
